<template>
  <TabGrayEasyCard 
    title="能耗分析"
    :tabs="cardData.tabs"
    :curTab="cardData.curTab"
    :grayCardList="cardData.grayCardList"
    :tabRight="cardData.date"
    @onMore="cardData.titleLeftjump"
    v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }"
  >
    <!-- 折线图 -->
    <LineEchart class="zs-layout-grow zs-overflow-auto" :echartId="`myEChartsBar-${props.permi}-energyCosts`" :echartData="cardData.echartData" :isInCard="true"></LineEchart>
  </TabGrayEasyCard>
</template>

<script setup>
import LineEchart from "@/components/EchartComponent/LineEchart";
import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard'
import dashBoardApi from '@/api/Property/dashBoard'
import { toThousands } from '@/utils/number-util'
import { reportLog } from '@/utils/reportLog'
import { reactive, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    hideList: {
        type: Array,
        required: false,
    },
    projectCode: {
        type: String,
        required: false,
        default: ''
    },
    menuKey: {
        type: String,
        required: false,
        default: ''
    },
    pageKey: {
        type: String,
        required: false,
        default: ''
    },
})

watch(()=>props.projectCode,()=>{
  queryCardData()
  queryEchartData()
})

let cardData = reactive({
  tabs:[
    { label: '累计', value: '日' }
  ],
  grayCardList:[
    { label: '能源费', value: '', unit: '万元', color: '', des: '' },
    { label: '单方', value: '', unit: '元/m²/月', color: '', des: '' },
    { label: '同比', value: '', unit: '%', color: '', des: '' },
  ],
  echartData:[],
  date:'',
  titleLeftjump () {
    reportLog({
        type: 4,
        resourceKey: props.permi,
    })
    // 跳转两算一控的下钻页
    router.push({
        // path: '/Property/detailPages/energyCosts',
        path: '/page/routeController/index',
        query: {
            rid: 'Property_energyCosts_Detail',
            rTitle: '能耗分析',
            projectCode: props.projectCode,
            menuKey: props.menuKey,
            pageKey: props.pageKey,
        },
    })
  },
})

// 获取卡片数据
function queryCardData () {
  dashBoardApi.energyCostsCardDataApi(props.projectCode).then(res=>{
    let resData = res.data
    if(resData.code == 200){
      cardData.grayCardList[0].value = toThousands(resData.data.accEnergyCosts)
      cardData.grayCardList[1].value = toThousands(resData.data.ecAccMonthUnitPrice)
      cardData.grayCardList[2].value = resData.data.accEnergyCostsErlier
      let { accEnergyCostsErlier:val } = resData.data
      cardData.grayCardList[2].color = val !== '-' ? (val <= 0 ? '3' :  '1') :''
      cardData.date = resData.data.timeLab
    }
  })
  
}
queryCardData()
// 获取图表数据
function queryEchartData () {
  dashBoardApi.energyCostsCardEchartApi(props.projectCode).then(res=>{
    let resData = res.data
    if(resData.code == 200){
      cardData.echartData = resData.data
    }
  })
  
}
queryEchartData()
</script>

<style lang="scss" scoped>
</style>
